<!--用户中心-->
<template>
  <div class="user-center">
    <el-form :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="区域：" prop="region">
        <el-select @change="getCityByRegion" filterable v-model="ruleForm.region" placeholder="请选择">
          <el-option
            v-for="item in regionList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市：" prop="city">
        <el-select filterable v-model="ruleForm.city" placeholder="请选择">
          <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户：" prop="customer">
        <el-input v-model="ruleForm.customer" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <el-form-item label="是否认证：" prop="realName">
        <el-select v-model="ruleForm.realName" placeholder="请选择">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推荐人：" prop="invitation">
        <el-input v-model="ruleForm.invitation" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户来源：" prop="source">
        <el-select filterable v-model="ruleForm.source" placeholder="请选择">
          <el-option
            v-for="item in userSource"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册/开通时间：">
        <el-date-picker
          v-model="time"
          clearable
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column
        v-for="(item,index) in colConfigs"
        :key="index"
        :width="item.width"
        :formatter="item.formatter"
        align="center"
        :prop="item.prop"
        :label="item.label"
      ></el-table-column>
      <el-table-column label="详细信息">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="ruleForm.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="ruleForm.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils.js";
export default {
  data() {
    return {
      cityList: [],
      regionList: [],
      userSource: [
        {
          value: 3,
          label: "购房者注册"
        },
        {
          value: 5,
          label: "公众号注册"
        },
        {
          value: 4,
          label: "推荐注册"
        },
        {
          value: 7,
          label: "微楼盘注册"
        },
        {
          value: 10,
          label: "珠江好房注册"
        }
      ],
      total: 0,
      time: [],
      regionId: "",
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        city: "",
        region: "",
        customer: "",
        realName: "",
        invitation: "",
        source: "",
        endDate: "",
        strDate: ""
      },
      colConfigs: [
        { prop: "region", label: "区域" },
        { prop: "city", label: "城市" },
        { prop: "username", label: "用户名" },
        { prop: "phone", label: "手机号" },
        { prop: "source", label: "用户来源", formatter: this.userSources },
        { prop: "invitationCode", label: "我的推荐码" },
        {
          prop: "invitationNum",
          label: "推荐的用户数",
          width: "200"
        },
        { prop: "invitationPhone", label: "我的推荐人" },
        { prop: "createtime", label: "注册时间" },
        { prop: "behavior", label: "最新行为" },
        { prop: "point", label: "积分余额" },
        { prop: "isReal", label: "是否认证" }
      ],
      dataList: []
    };
  },
  methods: {
    resetForm(formName) {
      this.ruleForm.pageSize = 10;
      this.ruleForm.pageNum = 1;
      this.time = [];
      this.$refs[formName].resetFields();
      this.list();
    },
    getCityByRegion(val) {
      this.ruleForm.city = "";
      let regionId = "";
      if (val == "华北区域") {
        regionId = 1;
      } else if (val == "华东区域") {
        regionId = 2;
      } else if (val == "华南区域") {
        regionId = 3;
      } else if (val == "西部区域") {
        regionId = 4;
      } else if (val == "华中区域") {
        regionId = 5;
      } else if (val == "海外区域") {
        regionId = 6;
      }
      this.regionId = regionId;
      this.getCity();
    },
    getCity() {
      this.axios
        .post(api.getCityByRegion, { regionId: this.regionId })
        .then(res => {
          if (res.data.code === 200) {
            this.cityList = res.data.data;
          }
        });
    },
    searchList() {
      this.ruleForm.pageNum = 1;
      let [strDate, endDate] = this.time || ["", ""];
      this.ruleForm.strDate = utils.getTimeString(strDate);
      this.ruleForm.endDate = utils.getTimeString(endDate);
      this.list();
    },
    list() {
      this.axios.post(api.listPage, this.ruleForm).then(res => {
        if (res.data.code === 200) {
          this.dataList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.list();
    },
    userSources(row) {
      if (row.source == 3) {
        return "购房者注册";
      } else if (row.source == 4) {
        return "推荐注册";
      } else if (row.source == 5) {
        return "公众号注册";
      } else if (row.source == 7) {
        return "微楼盘注册";
      } else if (row.source == 10) {
        return "珠江好房注册";
      }
    },
    initblocPoint(row, column, cellValue, index) {
      if (cellValue == "") {
        return "0";
      } else {
        return cellValue;
      }
    },
    handleClick(id) {
      this.$router.push({ path: "/userDetail", query: { id: id } });
    }
  },
  created() {
    this.$axios.get(api.CITYREGIONALL).then(res => {
      this.regionList = res;
    })
    this.getCity();
    this.list();
  }
};
</script>
<style lang="stylus">
.user-center {
  .el-table .cell {
    text-align: center;
    white-space: pre-line; /* 保留换行符 */
  }
}
</style>